import { Modal } from "antd";
import { QqOutlined } from "@ant-design/icons";
import axios from "axios";
import { useState, createRef, RefObject } from "react";
import From from "../../component/From";
function Loginht(props) {
  const inp: RefObject<any> = createRef();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const handleOk = () => {
    setIsModalVisible(false);
    inp.current.onFinish();
  };
  const handleCancel = () => {
    setIsModalVisible(false);
  };

  return (
    <div>
      <span
        className="btn"
        onClick={() => {
          setIsModalVisible(true);
        }}
      >
        登录
      </span>

      <Modal
        title="Basic Modal"
        visible={isModalVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <From ref={inp}></From>
        <p>
          <QqOutlined
            onClick={() => {
              axios.get("/api/login").then((res) => {
                console.log(res);
                let { response_type, client_id, redirect_uri, state } =
                  res.data;
                window.location.href = `https://graph.qq.com/oauth2.0/authorize?response_type=${response_type}&client_id=${client_id}&redirect_uri=${redirect_uri}&state=${state}`;
              });
            }}
          />
        </p>
      </Modal>
    </div>
  );
}
export default Loginht;
